CSS @media: Avancerede Media Query Mønstre for et Virkelig Responsivt Web

I det dynamiske landskab af moderne webudvikling er det ikke blot en bedste praksis at skabe oplevelser, der problemfrit tilpasser sig et stadigt voksende udvalg af enheder og brugerkontekster – det er en nødvendighed. Fra højopløselige computerskærme til kompakte smartphones, fra brugere i travle bycentre med højhastighedsinternet til dem i fjerntliggende områder med begrænset båndbredde, og fra individer, der foretrækker mørke temaer, til dem, der kræver reduceret bevægelse, skal nettet være fleksibelt. Det er her, CSS @media-regler, hjørnestenen i responsivt design, overskrider deres grundlæggende anvendelse for at blive kraftfulde værktøjer til avanceret tilpasningsevne.

Selvom mange udviklere er bekendt med at bruge @media til simple breakpoint-justeringer, ligger den sande styrke i dens avancerede mønstre, logiske operatorer og evnen til at udnytte bruger- og miljøpræferencer. Denne omfattende guide vil tage dig ud over det grundlæggende og udforske den komplekse verden af avancerede media query-funktioner, der gør dig i stand til at skabe virkelig robuste, inkluderende og globalt tilgængelige webapplikationer.

Vi vil dykke ned i teknikker, der giver dine designs mulighed for at reagere ikke kun på skærmstørrelse, men også på enhedskapaciteter, brugerens tilgængelighedsindstillinger og endda det omgivende miljø, hvilket sikrer en overlegen oplevelse for enhver bruger, overalt.

Fundamentet: En Kort Opsummering af Grundlæggende @media Syntaks

Før vi dykker ned i avancerede mønstre, lad os hurtigt genetablere fundamentet. En grundlæggende media query består af en valgfri medietype (som screen, print, all) og en eller flere media features (som min-width, orientation). Styles inden i @media-blokken anvendes kun, hvis betingelserne er opfyldt.

            /* Grundlæggende eksempel: Styles gælder kun på skærme, der er bredere end 768px */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Styles gælder kun, når siden udskrives */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Denne grundlæggende forståelse er afgørende, da avancerede mønstre bygger direkte oven på den.

Ud over Breakpoints: Forståelse af Media Query Features

Selvom width og height er de hyppigst anvendte media features, giver et rigt sæt af andre mulighed for meget mere nuancerede designbeslutninger. At forstå disse muligheder er nøglen til at bevæge sig ud over generiske mobil/tablet/desktop layouts.

Viewport-baserede Features (De Sædvanlige Mistænkte og Mere)

Disse funktioner relaterer sig til dimensionerne og karakteristika for browserens viewport, ikke den fysiske enheds skærm.

• width, height, min-width, max-width, min-height, max-height: Disse er kernen i responsivt design. De giver dig mulighed for at definere breakpoints baseret på browserens synlige område. For eksempel kan du ændre et enkelt-kolonne layout til et fler-kolonne layout, når min-width når en bestemt pixelværdi.

            /* Anvend et to-kolonne layout på bredere skærme */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio: Disse funktioner giver dig mulighed for at målrette designs baseret på forholdet mellem viewportens bredde og dens højde. Dette er utroligt nyttigt til at optimere indhold til forskellige skærmformer, fra ultrabrede skærme til høje smartphones.

            /* Optimer hero-billede til ultrabrede skærme (f.eks. 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation: Denne funktion registrerer, om viewporten er i portrait (højde er større end eller lig med bredde) eller landscape (bredde er større end højde) tilstand. Det er især vigtigt for mobil- og tablet-oplevelser.

            /* Juster layout for liggende orientering på tablets */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Enhedsbaserede Features (Mindre Almindelige, Stadig Nyttige)

Disse funktioner relaterer sig til egenskaberne ved den fysiske output-enhed. Mens viewport-baserede forespørgsler generelt foretrækkes til indholdslayout, har enheds-baserede funktioner specifikke nicher.

• device-width, device-height (og deres min/max varianter): Historisk set blev disse brugt til at målrette specifikke enhedsopløsninger. Men med variable browser-vinduesstørrelser på computere og tablets, og forskellige pixeltætheder, kan det være upålideligt at stole på disse til generelt layout. viewport-dimensionerne er næsten altid mere passende. De kan stadig overvejes i meget niche-scenarier, såsom applikationer specifikt designet til skærme med fast størrelse som kiosker, men disse er sjældne i typisk webudvikling.
• resolution: Denne funktion giver dig mulighed for at målrette skærme baseret på deres pixeltæthed (DPI eller DPX – dots per pixel). Dette er afgørende for at levere billeder af høj kvalitet til "Retina" eller høj-DPI-skærme uden at levere unødvendigt store filer til standardskærme.

            /* Lever et baggrundsbillede i højere opløsning til høj-DPI-skærme */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Bemærk brugen af både dpi og dppx for at dække forskellige browserfortolkninger og fremtidssikre din kode. dppx (dots per pixel unit) foretrækkes generelt, da det er mere enhedsuafhængigt.

Logiske Operatorer: Kombination af Betingelser med Præcision

For at bygge virkelig sofistikerede media queries skal du kombinere flere betingelser ved hjælp af logiske operatorer. Disse giver dig mulighed for at specificere præcist, hvornår et sæt styles skal anvendes.

`and`-operator: Alle Betingelser Skal Være Sande

Nøgleordet and kombinerer flere media features eller medietyper og features. Alle specificerede betingelser skal evaluere til sand for at stylesene kan anvendes.

            /* Anvend styles kun på skærme mellem 768px og 1024px brede */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Dette er ekstremt nyttigt til at målrette specifikke enhedsintervaller, som tablets i portrættilstand, eller til at skabe meget tilpassede layouts til meget specifikke skærmdimensioner.

`or`-operator (`, ` komma-separeret): Enhver Betingelse Kan Være Sand

I CSS @media-regler fungerer et komma (`,`) som et logisk OR. Hvis en af de komma-separerede media queries evaluerer til sand, anvendes de tilknyttede styles.

            /* Styles gælder, hvis skærmen er bredere end 1200px ELLER hvis enheden er i liggende orientering (uanset bredde) */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Styles gælder for printmedier ELLER for skærme med en minimumsopløsning */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* For bedre print/høj-opløsningsgengivelse */
  }
}

            

              
                Copy
              
            
          

Denne kraftfulde funktion giver dig mulighed for at gruppere styles, der skal anvendes under flere forskellige betingelser, hvilket fører til mere koncise og læsbare stylesheets.

`not`-operator: Invertering af en Betingelse

Nøgleordet not negerer en hel media query, hvilket betyder, at stylesene anvendes, hvis den specificerede betingelse ikke er opfyldt.

            /* Anvend styles på alle medietyper UNDTAGEN print */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Anvend styles, hvis det IKKE er en skærm med en minimumsbredde på 768px (dvs. for print eller skærme mindre end 768px) */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

Operatoren not kan være vanskelig og bør bruges med omtanke. Sørg for, at du forstår omfanget af, hvad der negeres. For eksempel betyder @media not screen and (min-width: 768px) "ikke en skærm OG min-width 768px", hvilket logisk set svarer til "hvis det ikke er en skærm ELLER hvis det er en skærm OG max-width er mindre end 768px". Det er ofte klarere at bruge max-width i stedet for not min-width.

`only`-nøgleord: Sikring af Bagudkompatibilitet (Historisk Kontekst)

Nøgleordet only blev introduceret for at skjule stylesheets fra ældre browsere, der ikke fuldt ud understøttede media queries. Hvis en ældre browser stødte på @media only screen, ville den typisk ignorere reglen, fordi den ikke genkendte only som en gyldig medietype. Moderne browsere parser det korrekt. I betragtning af den udbredte browserunderstøttelse for media queries i dag er only stort set overflødig for ny udvikling, men kan ses i ældre kodebaser.

            /* Eksempel: Styles anvendes kun på skærme, skjult for meget gamle browsere */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Brugerpræference Media Features: Omfavnelse af Inklusivitet og Tilgængelighed

Disse er måske de mest spændende og virkningsfulde avancerede media query-funktioner, da de giver udviklere mulighed for at reagere direkte på brugernes operativsystem- eller browser-niveau præferencer, hvilket fører til betydeligt mere tilgængelige og brugervenlige oplevelser. Dette er især vigtigt for et globalt publikum med forskellige behov og miljøer.

prefers-color-scheme: Lys og Mørk Tilstand

Denne funktion registrerer, om brugeren har anmodet om et lyst eller mørkt farvetema for deres operativsystem eller user agent. Implementering af mørk tilstand forbedrer tilgængelighed og komfort betydeligt, især i miljøer med svagt lys eller for brugere med lysfølsomhed.

• no-preference: Ingen præference er angivet af brugeren.
• light: Brugeren foretrækker et lyst tema.
• dark: Brugeren foretrækker et mørkt tema.

            /* Standard (lys) tema */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

For mere robuste implementeringer af mørk tilstand er CSS Custom Properties (variabler) uvurderlige, da de giver dig mulighed for at definere farvepaletter dynamisk.

prefers-reduced-motion: Respekt for Brugerens Komfort

Animationer og overgange kan forbedre brugeroplevelsen, men for nogle individer (f.eks. dem med vestibulære lidelser, ADHD eller simpelthen dem, der finder bevægelse distraherende) kan de forårsage ubehag eller endda kvalme. Denne funktion registrerer, om brugeren har anmodet om minimale ikke-essentielle animationer.

• no-preference: Ingen præference er angivet.
• reduce: Brugeren foretrækker reduceret bevægelse.

            /* Standard animation */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Deaktiver jævn rulning */
  }
}

            

              
                Copy
              
            
          

Det er en stærk bedste praksis for tilgængelighed altid at tilbyde et alternativ med reduceret bevægelse. Dette hjælper med at bygge et web, der er anvendeligt og behageligt for alle, uanset deres individuelle følsomheder.

prefers-contrast: Justering af Visuel Kontrast

Denne funktion registrerer, om brugeren har anmodet om et specifikt kontrastniveau for deres operativsystem. Dette er yderst gavnligt for brugere med nedsat syn eller visse farveopfattelsesdefekter.

• no-preference: Ingen præference.
• less: Brugeren foretrækker mindre kontrast.
• more: Brugeren foretrækker mere kontrast.
• custom: Brugeren har en brugerdefineret kontrastindstilling (mindre almindeligt).

            /* Styles for øget kontrast */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

Ved at levere styles til forskellige kontrastpræferencer bidrager du aktivt til et mere tilgængeligt og inkluderende digitalt miljø for brugere globalt.

forced-colors: Håndtering af System-tvungne Farvepaletter

Når et operativsystem (som Windows Høj Kontrast Tilstand) tvinger en specifik farvepalette på applikationer, kan det nogle gange tilsidesætte eller ødelægge brugerdefinerede webdesigns. Media-featuren forced-colors hjælper udviklere med at tilpasse sig dette scenarie, hvilket giver dem mulighed for at levere styles, der fungerer godt inden for de tvungne farvebegrænsninger.

• active: User agenten har en aktiv tvungen farvetilstand.
• none: Ingen tvungen farvetilstand er aktiv.

            /* Justeringer for brugere af Høj Kontrast Tilstand */
@media (forced-colors: active) {
  /* Sørg for, at elementer har synlige kanter */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Fjern baggrundsbilleder, der kan skjule tekst */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Gør dem synlige */
  }
}

            

              
                Copy
              
            
          

Denne funktion er afgørende for at sikre overholdelse af tilgængelighedsstandarder (som WCAG) og levere en funktionel oplevelse for brugere, der er afhængige af disse systemniveaujusteringer.

Miljømæssige Media Features: Tilpasning til Enhedens Evner

Disse media features giver dig mulighed for at skræddersy oplevelser baseret på, hvordan en bruger interagerer med deres enhed, såsom typen af pegeenhed de bruger eller deres skærms kapabiliteter.

hover og any-hover: Skelnen mellem Pegeenheder

Disse funktioner hjælper med at skelne mellem enheder, der understøtter hover (f.eks. computere med mus) og dem, der primært bruger touch (f.eks. smartphones, tablets). Dette er afgørende for at undgå frustrerende UX-mønstre på enheder kun med touch.

• hover: Refererer til den primære inputmekanisme.
• any-hover: Refererer til enhver tilgængelig inputmekanisme.
• Værdier: none (ingen hover-understøttelse), hover (hover-understøttelse).

            /* Vis tooltips kun på enheder med hover-kapacitet */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* På touch-enheder kan tooltips udløses af fokus eller slet ikke vises */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

Brug af any-hover er ofte mere robust, da en enhed kan have både touch- og musinput (f.eks. en 2-i-1 bærbar). Hvis any-hover er hover, så understøtter mindst én inputmetode hover. Hvis any-hover er none, så understøtter ingen inputmetode hover.

pointer og any-pointer: Skelnen mellem Pegeenheders Nøjagtighed

Disse funktioner registrerer nøjagtigheden af den primære (pointer) eller enhver tilgængelig (any-pointer) pegeenhed.

• none: Ingen pegeenhed.
• coarse: Unøjagtig pegeenhed (f.eks. en finger på en touchscreen).
• fine: Nøjagtig pegeenhed (f.eks. mus, stylus).

            /* Forøg størrelsen på trykmål for grove pegeredskaber */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Reducer padding for fine pegeredskaber */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Dette er afgørende for at designe touch-venlige grænseflader, hvor trykmål skal være tilstrækkeligt store til fingerinput, samtidig med at det tillader et mere kompakt design, når præcis museinteraktion er tilgængelig. Dette påvirker direkte brugervenligheden på tværs af et spektrum af enheder og brugerfærdigheder, især på globale markeder, hvor touch-first enheder er udbredte.

color-gamut: Ud over sRGB

Media-featuren color-gamut giver dig mulighed for at registrere, om brugerens skærm understøtter et bredere farverum end standard sRGB (f.eks. P3 eller Rec. 2020). Dette giver designere mulighed for at bruge en rigere, mere levende farvepalette på kompatible skærme.

• srgb: Standard sRGB-farverum.
• p3: Skærmen understøtter P3-farverum (bredere end sRGB).
• rec2020: Skærmen understøtter Rec. 2020-farverum (endnu bredere).

            /* Brug P3-farver for mere levende brand-elementer på kompatible skærme */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* En levende rød i P3 */
  }
}

            

              
                Copy
              
            
          

Selvom det stadig er under udvikling, peger denne funktion mod en fremtid med mere visuelt imponerende og præcise weboplevelser, især for kreative industrier eller levering af high-fidelity indhold.

update: Håndtering af Skærmopdateringshastigheder

Denne funktion angiver, hvor hurtigt output-enheden kan ændre udseendet af indhold. Dette er nyttigt til at optimere animationer og dynamisk indhold til forskellige skærmtyper.

• none: Kan ikke opdatere (f.eks. et trykt dokument).
• slow: Opdaterer langsomt (f.eks. e-ink skærme, nogle ældre enheder).
• fast: Opdaterer hurtigt (f.eks. typiske computerskærme, smartphones).

            /* Reducer komplekse animationer på langsomt opdaterende skærme */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Denne funktion hjælper med at sikre, at brugere på enheder som e-læsere, der prioriterer batterilevetid og statisk visning, ikke får en forringet eller hakkende oplevelse på grund af upassende animationer.

Avancerede Teknikker og Bedste Praksis

Ud over individuelle media features kan den måde, du strukturerer din CSS og kombinerer disse mønstre på, have en betydelig indvirkning på vedligeholdelse, ydeevne og den samlede designkvalitet.

Mobile-First vs. Desktop-First: Et Strategisk Valg

Valget mellem en mobile-first og en desktop-first tilgang er grundlæggende for en responsiv designstrategi.

• Mobile-First (min-width):
  • Start med at designe og style til den mindste skærm (mobil).
  • Brug min-width media queries til progressivt at tilføje styles for større skærme.
  • Fordele:
    • Ydeevne: Mobilenheder har ofte mindre processorkraft og langsommere internetforbindelser. En mobile-first tilgang sikrer, at kun de nødvendige styles indlæses i starten, hvilket fører til hurtigere sideindlæsninger. Dette er afgørende for brugere i regioner med udviklende internetinfrastruktur.
    • Progressiv Forbedring: Du bygger op fra en solid kerneoplevelse og tilføjer forbedringer til mere kapable enheder.
    • Fokus: Opfordrer udviklere til at prioritere essentielt indhold og funktionalitet.
• Desktop-First (max-width):
  • Start med at designe til store skærme (desktop).
  • Brug max-width media queries til at tilsidesætte styles for mindre skærme.
  • Fordele: Kan være lettere for teams, der er vant til traditionelt desktop-design, men fører ofte til mere komplekse tilsidesættelser for mobil.

For de fleste moderne projekter, især dem der retter sig mod et globalt publikum med forskellige enhedskapaciteter og netværksforhold, anbefales mobile-first-tilgangen stærkt.

            /* Mobile-first tilgang: Styles til små skærme er standard */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Tablet-specifikke styles */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Desktop-specifikke styles */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

Brug af CSS Custom Properties (Variabler) med Media Queries

At kombinere CSS Custom Properties (variabler) med media queries er en game-changer for vedligeholdelse af store, responsive stylesheets. I stedet for at gentage værdier, definerer du dem én gang og ændrer deres værdier inden i media queries.

            /* Definer standard (mobil) værdier */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Juster værdier for tablet-skærme */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Juster værdier for desktop-skærme */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* Brug variablerne i hele din CSS */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* Anvend styles for skærme mellem 600px og 900px */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* Ækvivalent med traditionel syntaks */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Skjul ikke-essentielle elementer til print */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* Sørg for, at teksten er sort på hvid for læsbarhed */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Vis fulde URL'er for links */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Sørg for passende sideskift */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobile-first: Standard til en skjult, off-canvas menu */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Tablet & Desktop: Vis vandret menu */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Yderligere justeringer for meget brede skærme eller specifikke billedformater */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Standard (mobil/lav-opløsning) baggrundsbillede */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* Mellem opløsning/desktop baggrundsbillede */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* Høj-DPI (Retina) specifikt baggrundsbillede */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* Flydende typografi ved hjælp af calc() og clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Juster grid for liggende tablets, foretrækker flere kolonner */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Juster skriftvægt for høj kontrast tilstand for bedre læsbarhed */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Centraliserede farvevariabler, der kan tilpasses lys/mørk tilstand */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Reducer animationer, hvis brugeren foretrækker det */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Justeringer for tvungne farver-tilstand */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* Sørg for at knapkanter er synlige */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Eksempel på en fremtidig Container Query */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy